<template>
  <div class="app-sidebar">
    <!-- 系统Logo区域 -->
    <div class="sidebar-logo">
      <div class="logo-content">
        <el-icon class="logo-icon" :size="28">
          <Location />
        </el-icon>
        <span v-if="!props.isCollapsed" class="logo-text">福州印象</span>
      </div>
    </div>

    <!-- 导航菜单 -->
    <el-menu
      :default-active="activeMenu"
      class="sidebar-menu"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      :collapse="props.isCollapsed"
      :collapse-transition="false"
      router
    >
      <!-- 用户管理 -->
      <el-menu-item index="/users" class="menu-item" @click="handleMenuItemClick">
        <el-icon><User /></el-icon>
        <template #title>用户管理</template>
      </el-menu-item>

      <!-- 店铺管理 -->
      <el-menu-item index="/shops" class="menu-item" @click="handleMenuItemClick">
        <el-icon><Shop /></el-icon>
        <template #title>店铺管理</template>
      </el-menu-item>

      <!-- 景区管理 -->
      <el-menu-item index="/scenics" class="menu-item" @click="handleMenuItemClick">
        <el-icon><MapLocation /></el-icon>
        <template #title>景区管理</template>
      </el-menu-item>

      <!-- 留言板管理 -->
      <el-menu-item index="/messages" class="menu-item" @click="handleMenuItemClick">
        <el-icon><ChatDotRound /></el-icon>
        <template #title>留言板管理</template>
      </el-menu-item>

      <!-- 景点预约管理 -->
      <el-menu-item index="/reservations" class="menu-item" @click="handleMenuItemClick">
        <el-icon><Calendar /></el-icon>
        <template #title>景点预约管理</template>
      </el-menu-item>
    </el-menu>

    <!-- 折叠按钮 -->
    <div class="sidebar-toggle" @click="handleToggle">
      <el-icon :size="16">
        <Fold v-if="!props.isCollapsed" />
        <Expand v-else />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import {
  User,
  Shop,
  MapLocation,
  ChatDotRound,
  Calendar,
  Location,
  Fold,
  Expand
} from '@element-plus/icons-vue'

const route = useRoute()
const emit = defineEmits(['toggle-collapse', 'menu-click'])

// 接收父组件传递的折叠状态
const props = defineProps({
  isCollapsed: {
    type: Boolean,
    default: false
  },
  isMobile: {
    type: Boolean,
    default: false
  }
})

// 当前激活的菜单项
const activeMenu = computed(() => {
  return route.path
})

// 处理折叠切换
const handleToggle = () => {
  emit('toggle-collapse')
}

// 处理菜单项点击
const handleMenuItemClick = () => {
  emit('menu-click')
}

// 监听路由变化，确保菜单高亮正确
watch(
  () => route.path,
  (newPath) => {
    // 可以在这里添加路由变化的处理逻辑
    console.log('Route changed to:', newPath)
  }
)
</script>

<style scoped>
.app-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #304156;
}

/* Logo区域 */
.sidebar-logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #434a50;
  background-color: #2b3a4b;
}

.logo-content {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

.logo-icon {
  color: #409EFF;
  margin-right: 8px;
}

.logo-text {
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}

/* 菜单样式 */
.sidebar-menu {
  flex: 1;
  border: none;
  overflow-y: auto;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 200px;
}

.menu-item {
  height: 50px;
  line-height: 50px;
}

.menu-item:hover {
  background-color: #434a50 !important;
}

.menu-item.is-active {
  background-color: #409EFF !important;
  color: #fff !important;
}

/* 折叠按钮 */
.sidebar-toggle {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #434a50;
  background-color: #2b3a4b;
  cursor: pointer;
  color: #bfcbd9;
  transition: background-color 0.3s ease;
}

.sidebar-toggle:hover {
  background-color: #434a50;
  color: #409EFF;
}

/* 折叠状态下的样式调整 */
.el-menu--collapse .logo-text {
  display: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar-menu:not(.el-menu--collapse) {
    width: 200px;
  }
  
  .logo-content {
    justify-content: center;
  }
  
  .logo-text {
    font-size: 16px;
  }
}

/* 滚动条样式 */
.sidebar-menu::-webkit-scrollbar {
  width: 4px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: #2b3a4b;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: #434a50;
  border-radius: 2px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: #5a6169;
}
</style>